<template>
  <div class="step1">
    <!-- 提示框 -->
    <div class="select">
      <!-- <h2>{{ $t('reserve.browseAvailability') }}</h2> -->
      <p>{{ $t("reserve.selectDate") }}</p>
    </div>
    <!-- 日期选择框 -->
    <div class="fl-row date" dir="ltr">
      <el-date-picker
        v-model="value1"
        type="date"
        value-format="YYYY-MM-DD"
        :prefix-icon="customPrefix"
        popper-class="test"
        :format="dataFormat"
        @change="getData"
        :editable="false"
      />
      <span class="week-text" v-if="dataFormat.indexOf('1970') === -1">{{
        week
      }}</span>
    </div>
    <div class="fl-row page">
      <div class="date-but" @click="changDate(1)">
        <el-icon> <Back /> </el-icon>{{ $t("reserve.previous") }}
      </div>
      <div class="date-but" @click="changDate(2)">
        {{ $t("reserve.today") }}
      </div>
      <div class="date-but" @click="changDate(3)">
        <el-icon> <Right /> </el-icon>{{ $t("reserve.next") }}
      </div>
    </div>
    <!-- table -->
    <div class="table">
      <div
        class="common-pd-border today-text"
        v-if="dataFormat.indexOf('1970') === -1"
      >
        {{ tableTime === "" ? week + dataFormat : tableTime }}
      </div>
      <!-- 列表循环 -->
      <div v-for="(item, index) in list" :key="index" @click="choseId = index">
        <div class="list common-pd-border">
          <div class="list-left">
            <div>
              <!-- 时间 -->
              <div class="time">{{ item.time }}</div>
              <!-- <div class="time-dec">{{ item.time }}</div> -->
            </div>
            <div class="fl-row">
              <!-- 名称 -->
              <div>{{ store.store_name }}</div>
            </div>
          </div>
          <div class="list-right">
            <div>
              <!-- 库存 -->
              <div class="available">{{ $t("reserve.available") }}</div>
              <div class="count">{{ item.available }}</div>
            </div>
            <!-- 按钮 -->
            <div class="but" :class="{ noIn: item.available == 0 }">
              {{
                item.available > 0
                  ? choseId == index
                    ? $t("reserve.selecteo")
                    : $t("reserve.bookNow")
                  : $t("reserve.soldOut")
              }}
              <el-icon>
                <CaretBottom />
              </el-icon>
            </div>
          </div>
        </div>
        <!-- 被选中展看显示 -->
        <div
          class="chose-list"
          v-if="choseId == index && item.available > 0"
          dir="ltr"
        >
          <div class="top">
            <!-- 日期 -->
            <div class="left">
              <div>{{ week }}</div>
              <div class="month">{{ month }}</div>
              <div>{{ day }}</div>
            </div>
            <div class="right">
              <el-icon
                color="var(--theme-color)"
                class="close"
                @click.stop="close"
              >
                <Close />
              </el-icon>
            </div>
          </div>
          <div class="playlist">
            <div class="list-item" v-for="(item, i) in goodsInfo" :key="i">
              <div class="line">
                <img :src="item.goods_img" alt="" v-if="item.goods_img" />
                <div class="title ellipsis">{{ item.goods_name }}</div>
                <div class="num-money">
                  <div class="money">
                    <span> {{ $t("reserve.prePlayer") }}</span>
                    <span class="dan">{{
                      custom.symbol + formatMoney(item.goods_price)
                    }}</span>
                  </div>
                  <el-input-number
                    v-model="item.num"
                    :min="0"
                    @change="numChange"
                  />
                </div>
                <el-icon v-if="detailShowId === i" @click="unpack(NaN)"
                  ><ArrowDownBold
                /></el-icon>
                <el-icon v-else @click="unpack(i)"><ArrowRightBold /></el-icon>
              </div>
              <div class="detail" v-if="detailShowId === i">
                <h3 class="title">{{ item.goods_name }}</h3>
                <div v-html="item.goods_content"></div>
              </div>
            </div>
          </div>
          <!-- <div>
              <h3 class="title">{{ goodsInfo.goods_name }}</h3>
              <div v-html="goodsInfo.goods_content"></div>
            </div>
            <div class="num-money">
              <div class="money">
                {{ $t("reserve.prePlayer")
                }}<span class="dan">{{
                  custom.symbol + goodsInfo.goods_price
                }}</span>
              </div>
              <el-input-number v-model="num" :min="1" />
            </div> -->
          <div class="money-all">
            <div>
              <!-- <div class="money2 money">
                  {{ $t("reserve.admissionTicket") }} <span>{{ custom.symbol }}</span
                  ><span class="ft-21">{{
                    (admissionTicketPrice).toFixed(2)
                  }}</span>
                </div>
                <div class="money2 money">
                  {{ $t("reserve.downPayment") }} <span>{{ custom.symbol }}</span
                  ><span class="ft-21">{{
                    (goodsInfo.goods_price * num).toFixed(2)
                  }}</span>
                </div>
                <div class="money2 money">
                  {{ $t("reserve.individualIncomeTax") }} <span>{{ custom.symbol }}</span
                  ><span class="ft-21">{{
                    (goodsInfo.goods_price * num).toFixed(2)
                  }}</span>
                </div> -->
              <div class="money">
                {{ $t("reserve.subtotal") }} <span>{{ custom.symbol }}</span
                ><span class="ft-20">{{
                  formatMoney(admissionTicketPrice.toFixed(2))
                }}</span>
              </div>
            </div>
            <div class="but" @click="next(item.time)">
              {{ $t("reserve.continue") }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fl-row bottom">
      <div class="date-but" @click="scrollIntoView">
        {{ $t("reserve.toTop") }}
      </div>
      <div class="fl-row">
        <div class="date-but" @click="changDate(1)">
          <el-icon> <Back /> </el-icon>{{ $t("reserve.previous") }}
        </div>
        <div class="date-but" @click="changDate(2)">
          {{ $t("reserve.today") }}
        </div>
        <div class="date-but" @click="changDate(3)">
          <el-icon> <Right /> </el-icon>{{ $t("reserve.next") }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { bookList } from "../reserve.service";
import { computed, h, ref, shallowRef } from "vue";
import moment from "moment";
import { useI18n } from "vue-i18n";
import { formatMoney } from "@/utils/commen"

const store = JSON.parse(localStorage.getItem("store"));
const admissionTicketPrice = ref(0);
const detailShowId = ref();
const custom = JSON.parse(localStorage.getItem("custom") as any);
const { t } = useI18n();
const today = `${new Date().getFullYear()}-${
  // 今天
  new Date().getMonth() + 1 < 10
    ? "0" + (new Date().getMonth() + 1)
    : new Date().getMonth() + 1
}-${new Date().getDate()<10?'0'+new Date().getDate():new Date().getDate()}`;
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
const tomorrowStr = `${tomorrow.getFullYear()}-${
  // 明天
  tomorrow.getMonth() + 1 < 10
    ? "0" + (tomorrow.getMonth() + 1)
    : tomorrow.getMonth() + 1
}-${tomorrow.getDate()}`;
const emits = defineEmits(["next"]);
const value1 = ref(moment().format("YYYY-MM-DD"));
const week = ref("");
const month = ref(null);
const day = ref(null);
const dataFormat = computed(() => {
  // 时间选择器的显示formdata
  const date = new Date(value1.value);
  const weekDay = date.getDay(); // 返回值是 0（周日）到 6（周六）
  const arr = t("reserve.week").split(",");
  console.log(t("reserve.week"), "$t('reserve.next')");
  // 获取月份（0表示1月，11表示12月）
  month.value = date.getMonth() + 1; // 加1因为getMonth()返回的是从0开始的月份数字
  // 获取日（1-31）
  day.value = date.getDate();
  // 获取年份
  const year = date.getFullYear();
  week.value = arr[weekDay];
  return "            " + month.value + " " + day.value + "," + " " + year;
});
const tableTime = computed(() => {
  // 时间计算
  if (value1.value == today) {
    return t("reserve.today");
  } else if (value1.value == tomorrowStr) {
    return t("reserve.today");
  }
  return "";
});
// const num = ref(1); //数量
const choseId = ref(null); // 当前选择的id
const customPrefix = shallowRef({
  // 日期前缀不要啦
  render() {
    return h("span", "");
  },
});
const list = ref([]); // 列表数据
const goodsInfo = ref([]);
const pushMoney = ref("");
// 获取列表数据
const getData = () => {
  admissionTicketPrice.value = 0
  bookList({ date: value1.value }).then((res) => {
    list.value = res.data.book_list;
    console.log(list.value, "lise");

    goodsInfo.value = res.data.goods_info.map((item) => {
      item.num = 1;
      admissionTicketPrice.value += item.num * item.goods_price;
      return item;
    });
    pushMoney.value = goodsInfo.value ? goodsInfo.value.goods_price : "";
  });
};

const unpack = (i: Number) => {
  detailShowId.value = i;
};

// 门票数量改变
const numChange = () => {
  admissionTicketPrice.value = 0;
  goodsInfo.value.forEach((item) => {
    admissionTicketPrice.value += item.num * item.goods_price;
  });
};

// 下一步
const next = (val) => {
  if (goodsInfo.value.some((item) => item.num)) {
    let arr = [];
    goodsInfo.value.forEach((item) => {
      if (item.num) {
        arr.push({ goods_num: item.num, goods_id: item.goods_id });
      }
    });
    const data = {
      book_info: {
        date: value1.value.replace(/-/g, ""),
        time: val,
      },
      good_info: arr,
    };
    emits("next", data, admissionTicketPrice.value);
  }
};
// 时间控制器
const changDate = (num:Number) => {
  console.log(num);
  let last = "";
  let date = new Date(value1.value);
  console.log(value1.value);
  if (num === 1 && value1.value != today) {
    date.setDate(date.getDate() - 1); // 减一天
    last = `${date.getFullYear()}-${
      date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1
    }-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;
  } else if (num === 3) {
    date.setDate(date.getDate() + 1); // 加一天
    last = `${date.getFullYear()}-${
      // 明天
      date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1
    }-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;
  } else {
    last = today;
  }
  value1.value = last;
  getData();
  console.log(value1.value);
};
//平滑滚动顶部
const scrollIntoView = () => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
};

const close = () => {
  choseId.value = null;
  detailShowId.value = NaN;
};

defineExpose({ pushMoney });

// 初始化
getData();
</script>

<style scoped lang="scss">
.step1 {
  .select {
    text-align: left;
    color: #0e2e57;
    margin-bottom: 5px;
    margin-left: 8px;

    h2 {
      margin-bottom: 5px;
      font-size: 18px;
      line-height: 1.4;
      font-weight: 600;
    }

    p {
      margin: 0;
      font-size: 14px;
    }
  }

  .fl-row {
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  .page {
    justify-content: left;
    margin-left: 10px;
    margin-bottom: 10px;
  }
  .date {
    margin-left: 8px;
    margin-bottom: 30px;
  }

  .date-but {
    border-radius: 0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    margin-right: -1px;
    border: 1px solid var(--theme-color);
    font-size: 12px;
    padding: 10px 13px;
    color: #0e2e57;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;

    .el-icon {
      font-size: 18px;
      margin-right: 4px;
    }
  }

  .table {
    width: 100%;
    text-align: left;
    .today-text {
      margin-left: 8px;
    }
    .common-pd-border {
      border-bottom: 1px solid var(--theme-color);
      padding-bottom: 15px;
      color: #0e2e57;
      font-weight: 600;
    }

    .list {
      display: flex;
      align-items: center;
      padding: 10px 0;
      margin: 0 15px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;

      .list-left {
        width: 50%;
        display: flex;
        align-items: center;
        margin-right: 10px;

        .time {
          font-size: 14px;
          margin-right: 20px;
          text-align: center;
        }

        .fl-row {
          max-width: 90px;
          font-size: 14px;
        }

        .time-dec {
          margin: 4px 0;
          font-size: 12px;
          margin-right: 20px;
          text-align: center;
        }
      }

      .list-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;

        .available {
          margin-bottom: 4px;
          font-size: 12px;
        }

        .count {
          font-size: 18px;
          letter-spacing: -1.2px;
          text-align: center;
        }

        .but {
          color: #e2e8fc;
          background: var(--theme-color-btn);
          font-size: 10px;
          padding: 8px 5px;
          text-align: center;
          cursor: pointer;
          &:hover {
            background: var(--theme-color);
            color: #fff;
          }
        }
        .noIn {
          background: #ccc;
          color: #333;
          cursor: not-allowed;
        }
      }
    }

    .chose-list {
      padding: 20px 0;
      border-bottom: 1px solid var(--theme-color);

      .top {
        padding: 0 10px;
        display: flex;
      }
      .left {
        color: #e2e8fc;
        background: var(--theme-color-btn);
        width: 50px;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 10px;
        .month {
          font-size: 16px;
        }
      }

      .right {
        text-align: left;
        width: 85%;

        .title {
          font-size: 16px;
          margin-bottom: 10px;
        }

        .close {
          margin: auto 0 auto auto;
          display: block;
          font-size: 18px;
          font-size: 30px;
          cursor: pointer;
        }
      }
      .num-money {
        display: flex;
        align-items: center;
        margin-top: 40px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--theme-color);

        .money {
          margin-right: 50px;
          font-size: 14px;
          color: #0e2e57;
          font-weight: 600;
          .dan {
            margin-left: 5px;
          }
        }

        .el-input-number {
          width: 100px;
          height: 40px;
          margin-left: auto;
        }

        :deep(.el-input-number__decrease) {
          width: 30px;
          height: 30px;
          background: transparent;
          border-right: 1px solid var(--theme-color);
          top: 4px;
        }

        :deep(.el-input-number__increase) {
          width: 30px;
          height: 30px;
          background: transparent;
          border-left: 1px solid var(--theme-color);
          top: 4px;
        }

        :deep(.el-input__wrapper) {
          height: 30px;
          padding-left: 30px;
        }
      }
      .playlist {
        padding-left: 10px;
        margin-top: 10px;
        .list-item {
          margin-bottom: 10px;
          .line {
            display: flex;
            align-items: center;
            img {
              width: 40px;
              height: 40px;
              margin-right: 10px;
            }
            .title {
              flex: 1;
              font-weight: bold;
              font-size: 12px;
              margin-bottom: 0;
            }
            .num-money {
              margin-right: 5px;
              margin-top: 0;
              padding: 0;
              border: none;
              .money {
                display: flex;
                flex-direction: column;
                font-size: 10px;
                margin-right: 10px;
                margin-left: 5px;
                max-width: 90px;
              }
            }
            .el-icon {
              font-size: 16px;
              margin-right: 10px;
              cursor: pointer;
              color: rgb(64, 118, 192);
            }
          }
          .detail {
            margin-top: 10px;
            .title {
              font-size: 18px;
            }
          }
        }
      }

      .money-all {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        padding: 10px 10px;
        justify-content: space-between;

        .money {
          margin-right: 50px;
          font-size: 12px;
          font-weight: 600;

          span {
            color: var(--theme-color);
          }

          .ft-20 {
            font-size: 20px;
          }
          .ft-21 {
            font-size: 16px;
          }
        }
        .money2 {
          font-size: 12px;
        }
        .but {
          color: #e2e8fc;
          background: var(--theme-color-btn);
          font-size: 14px;
          width: 50%;
          margin-left: 45px;
          text-align: center;
          height: 40px;
          line-height: 40px;
          font-weight: 600;
          cursor: pointer;
          &:hover {
            background: var(--theme-color);
            color: #fff;
          }
        }
      }
    }
  }

  .bottom {
    margin-top: 40px;
  }
}

:deep(.el-input__wrapper) {
  padding: 0 30px 0 10px;
  font-size: 12px;
  font-weight: 600;
  height: 40px;
  color: #0e2e57;
  background: transparent;
  border: 1px solid var(--theme-color);
}
.week-text {
  line-height: 42px;
  font-size: 12px;
  position: absolute;
  left: 15px;
  color: #555;
}

.ellipsis {
  white-space: nowrap; /* 保证文本在一行内显示 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
}
</style>
<style>
@import "./step1.scss";
</style>